<!DOCTYPE html>
<html>
<head>
    <title>欢迎使用后台管理系统</title>
    <meta charset="utf-8">
    <%- include ../default.html%>
    <link href="/public/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="/public/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="/public/core/treeSelect/vue-treeselect.min.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .vue-treeselect__no-children-tip{display: none;}
        .api-dialog-setRoles .el-dialog__body{
            min-height:200px;
            max-height: 400px;
            overflow: auto;
        }
    </style>
</head>

<body>
<%- include header.html%>
<section>
    <%- include menu.html%>
    <aside class="content" id="content">
        <el-form :inline="true" ref="formModel" :model="formModel"  class="demo-form-inline api-user" v-cloak onsubmit="return false">
            <el-form-item label="角色名称" prop="roleName">
                <el-input type="text" v-model="formModel.roleName" auto-complete="off" size="mini" ref='roleName'></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="submitForm" size="mini" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <template>
            <el-table :data="tableData" style="width: 100%" class="aa-table">
                    <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
                    <el-table-column fixed prop="rolename" label="角色名称" width="180"></el-table-column>
                    <!--<el-table-column fixed prop="menuName" label="角色权限" width="180" :show-overflow-tooltip="true"></el-table-column>-->
                    <el-table-column fixed prop="createman" label="创建人"></el-table-column>
                    <el-table-column fixed prop="updatetime" label="创建时间"></el-table-column>
                    <el-table-column fixed prop="memo" label="备注信息" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="operate" label="操作" :render-header="renderHeader" width="240" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="editRoleHandler(scope.row)">编辑</el-button>
                            <el-button size="mini" @click="setResourcesHandler(scope.row)">授权</el-button>
                            <el-button size="mini" type="danger" @click="deleteRoleHandler(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
            </el-table>
            <div class="block repeat-menu-page">
                <el-pagination  background
                                :current-page="page.currentPage"
                                :page-sizes="page.pageSizes"
                                :page-size="page.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="page.total"
                                @size-change="sizeChangeHandler"
                                @current-change="currentChangeHandler"
                >
                </el-pagination>
            </div>
        </template>

        <!-- 新增角色 修改角色 -->
        <el-dialog :title="dialogTile" :visible.sync="dialogMenWinVisible"  custom-class="api-dialog-tips" width="50%" :close-on-click-modal="false" v-cloak @close="closeRoleDialog('role')">
            <el-form label-position="labelPosition" label-width="80px" ref="role" :model="role" size="mini" :rules="rules" :show-message="true" :status-icon="true">
                    <el-form-item label="角色名称" prop='rolename'>
                        <el-input  auto-complete="off" v-model="role.rolename" placeholder="角色名称"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述" prop='memo'>
                        <el-input type="textarea" v-model="role.memo" placeholder="角色描述"></el-input>
                    </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeRoleDialog('role')">取消</el-button>
                <el-button type="primary" @click="submitRoleDialog('role')">确定</el-button>
            </div>
        </el-dialog>

        <!--授权-->
        <el-dialog title="权限设置" :visible.sync="dialogRoleVisible"  custom-class="api-dialog-setRoles" width="50%" height="300px" :close-on-click-modal="false" v-cloak @close="closeSetResourcesDialog('role')">
            <el-tree
                    :data="menuList"
                    show-checkbox
                    node-key="id"
                    :default-expand-all="defaultExpandAll"
                    :default-checked-keys="checkedResources"
                    ref="tree"
                    :props="defaultProps">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeSetResourcesDialog('tree')">取消</el-button>
                <el-button type="primary" @click="submitSetResources('tree')">确定</el-button>
            </div>
        </el-dialog>

        <!--删除的提示信息-->
        <el-dialog title="提示信息" :visible.sync="confirmVisible" width="30%"  custom-class="api-dialog-tips" v-cloak>
            <span>此操作将永久删除该记录，是否继续？</span>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancelHandler">取 消</el-button>
                <el-button type="primary" @click="deleteHandler" size="mini">确 定</el-button>
            </span>
        </el-dialog>
    </aside>
</section>
<script src="/public/js/main.js"> </script>
<script src="/public/core/treeSelect/vue-treeselect.min.js"> </script>
<script src="/public/js/roleManage.js"></script>
</body>
</html>
